import React, { PureComponent } from "react";
import { Project, Words, Arwes, Button } from "arwes";
import Application from "./Application.js";
import TWEEN from "tween";
export default class learn extends PureComponent {
  constructor(props) {
    super(props);
    this.canvas = null;
    this.state = {
      height: document.documentElement.clientHeight,
      width: document.documentElement.clientWidth
    };
  }
  componentDidMount() {
    // 页面存一分canvas
    this.canvas = document.getElementById("myCanvas");
    // 实例化canvas内的three程序
    window.application = new Application({
      canvas: this.canvas
    });
  }
  render() {
    return (
      <Arwes
        timeout={1000}
        animate
        background="/img/background-large.jpg"
        pattern="/img/glow.png"
      >
        <canvas
          id="myCanvas"
          width={this.state.width}
          height={this.state.height}
          style={{
            width: this.state.width,
            height: this.state.height,
            zIndex: -1,
            position: "absolute"
          }}
        ></canvas>
        <Button
          layer={"header"}
          animate
          onClick={() => {
            const ballMesh = window.application.world.getObjectByName(
              "ballMesh"
            );
            let tw = new TWEEN.Tween(ballMesh.position)
              .to({ x: 3, y: ballMesh.position.y + 1, z: 1 }, 1000) //最终值
              .easing(TWEEN.Easing.Quartic.InOut) //变化方法
              .start();
          }}
        >
          测试按钮
        </Button>
      </Arwes>
    );
  }
}
